<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- ref 用来获取原生dom或组件实例 vue或react不建议直接进行dom操作.
            但是有些情况必须进行dom操作.获取焦点 控制视频播放 音频播放。
            ref="mingcheng" 在方法里面获取ref实例 this.$refs.mingcheng
        -->
        <!-- 
            v-if 渲染的元素的如果隐藏是直接移除dom节点.
            v-show 隐藏的元素 只是设置display:none隐藏元素.
            如果频繁显示或隐藏元素最好用v-show提高性能.
            如果不是频繁显示或隐藏 最好用v-if v-if能提高“首次”渲染效率
         -->
        <button v-show="show">这是一个按钮元素</button>
        <input v-if="show" type="text" ref="myinput" />
        <span v-else v-on:click="showInput">显示输入框</span>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    show: false
                }
            },
            methods: {
                showInput() {
                    //当数据发生变化以后，dom没有立即更新.而且更新过程异步的.
                    this.show = true;//显示
                    //所以当show变化后 input没有立即显示 所以这时候获取的input元素的是undefined
                    // console.log(this.$refs.myinput);
                    //所以这时候如果想要获取渲染后的input元素 ,那么就需要用nextTick函数
                    //nextTick 在“下一次渲染完成后”调用nextTick里面的回调函数
                    //this.$nextTick() 这个函数是挂载在当前实例上面的方法
                    // this.$nextTick(()=>{
                    //     console.log(this.$refs.myinput);
                    // })
                    //Vue.nextTick这个函数挂载到Vue类上面的静态方法
                    //next 在更新dom或组件的时候 ，你不能保证组件或dom更新完成 ，但是你又需要拿到
                    //最新的dom或组件 那么就在nextTick里面去操作.
                    Vue.nextTick(()=>{
                        console.log(this.$refs.myinput);
                    });
                }
            }
            // render(){}
            // template:''
        })
        app.mount("#app");
    
    </script>
</body>

</html>